<script setup>
import {computed, ref} from "vue";
import {IconJson} from "@/components/IconSelect/data";
import {cloneDeep} from "lodash";

const iconList = ref(IconJson);
const currentType = ref('ep');
const pageSize = ref(36);
const currentPage = ref(1);
const copyIconList = cloneDeep(iconList.value)
const iconTypeList = ref([
  {label: 'Element Plus', value: 'ep'},
  {label: 'Font Awesome Solid', value: 'fa6-solid'},
  {label: 'Font Awesome Regular', value: 'fa6-regular'},
  {label: 'Font Awesome Brands', value: 'fa6-brands'},
  {label: 'Font Awesome 5 Solid', value: 'fa-solid'},
  {label: 'Font Awesome 5 Regular', value: 'fa-regular'},
  {label: 'Font Awesome 5 Brands', value: 'fa-brands'},
  {label: 'Font Awesome 4', value: 'fa'},
  {label: 'Fluent UI System Icons', value: 'fluent'},
  {label: 'Ant Design Icons', value: 'ant-design'},
  {label: 'Google Material Icons', value: 'ic'},
  {label: 'Material Design Icons', value: 'mdi'},
  {label: 'Material Symbols', value: 'material-symbols'},
  {label: 'Material Symbols Light', value: 'material-symbols-light'},
  {label: 'Tabler Icons', value: 'tabler'},
  {label: 'Carbon', value: 'carbon'},
]);
const filterValue = ref('')

const pageList = computed(() => {
  if (currentPage.value === 1) {
    return copyIconList[currentType.value]
        ?.filter((i) => i.includes(filterValue.value))
        .slice(currentPage.value - 1, pageSize.value)
  } else {
    return copyIconList[currentType.value]
        ?.filter((i) => i.includes(filterValue.value))
        .slice(
            pageSize.value * (currentPage.value - 1),
            pageSize.value * (currentPage.value - 1) + pageSize.value
        )
  }
})

const iconCount = computed(() => {
  return copyIconList[currentType.value] === undefined ? 0 : copyIconList[currentType.value].length
})

const onCurrentChange = (page) => {
  currentPage.value = page
}
</script>

<template>
  <a-tabs v-model:active-key="currentType" tab-position="left">
    <a-tab-pane v-for="item in iconTypeList" :key="item.value" :tab="item.label">
      <template #tab>
        <a-tooltip placement="left">
          <template #title>{{item.label}}</template>
          {{ item.label }}
        </a-tooltip>
      </template>

      <a-input v-model:value="filterValue" placeholder="请输入查询条件" class="mb-5"></a-input>
      <ul class="icon-list">
        <li
            v-for="(item,index) in pageList"
            :key="index"
            class="icon-item"
            v-copy>
          <a-tooltip>
            <template #title>{{currentType+':'+item}}</template>
            <icon :icon="`${currentType}:${item}`" class="icons"
                  width="2em" height="2em" color="#333"/>
          </a-tooltip>
          <span class="hidden">{{currentType+':'}}</span><span style="width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item }}</span>
        </li>
      </ul>

      <a-divider border-style="dashed"/>

      <a-pagination
          class="pagination-container"
          v-model:current="currentPage"
          v-model:page-size="pageSize"
          :total="iconCount"
          @current-change="onCurrentChange"/>
    </a-tab-pane>
  </a-tabs>
</template>

<style scoped lang="scss">

.icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border-left: 1px solid #dcdfe6;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  cursor: pointer;
}

.icon-item {
  text-align: center;
  height: 90px;
  font-size: 13px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &:nth-child(-n+6) {
    border-top: 1px solid #dcdfe6;
  }

  .icons {
    &:focus {
      outline: unset;
    }

  }
}
.pagination-container{
  display: flex;
  justify-content: flex-end;
}
</style>
